import { RootState } from '@/types/store'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { usePersistFn } from 'ahooks'

const useInitialState = <StateName extends keyof RootState>(
  action: () => void,
  stateName: StateName,
  afterAction = () => {}
) => {
  // 对于 useRef 来说，参数只会在第一次组件渲染时生效，类似 useState 的参数
  const persistAction = usePersistFn(action)
  // 创建用来处理 afterAction 的 ref 对象，来避免递归发送请求
  const persistAfterAction = usePersistFn(afterAction)
  const state = useSelector((state: RootState) => state[stateName])
  const dispatch = useDispatch()
  // 对于 useRef 来说，参数只会在第一次组件渲染时生效，类似 useState 的参数
  // const actionRef = useRef(action)
  // React 知道 useRef 创建的对象，引用不变，所以，即使在 useEffect 中
  // 使用 useRef 对象，也不会提醒我们给 useEffect 添加依赖
  useEffect(() => {
    const loadData = async () => {
      // 注意：此处需要添加 await，因为后面的代码，应该是等到请求完成后再执行
      await dispatch(persistAction())
      // 在 请求完成 后，执行某个操作
      persistAfterAction()
    }
    loadData()
  }, [dispatch, persistAction, persistAfterAction])
  return state
}

export { useInitialState }
